﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .red
        {
            background-color: Red;
            width: 200px;
            height: 200px;
        }
        .yellow
        {
            background-color: Yellow;
            width: 100px;
            height: 100px;
        }
        .blue
        {
            background-color: Blue;
            width: 50px;
            height: 50px;
        }
    </style>
    <script src="Common.js" type="text/javascript"></script>
    <script type="text/javascript">

        BindEvent(window, "load", function (e) {
            // 追加子元素
            var dRed = Get("divRed");
            var dYellow = Get("divYellow");
            BindEvent("btnAppend", "click", function (e) {
                //Get("divRed").appendChild(Get("divYellow"));
                dRed.appendChild(dYellow);
            });
            // 删除子元素
            BindEvent("btnRemove", "click", function (e) {
                Get("divRed").removeChild(Get("divYellow"));
            });

            // 替换子元素
            BindEvent("btnReplace", "click", function (e) {
                Get("divRed").replaceChild(Get("divBlue"), Get("divYellow"));
            });

            // 在某子元素之前插入元素
            BindEvent("btnInsertBefore", "click", function (e) {
                Get("divRed").insertBefore(Get("divBlue"), Get("divYellow"));
            });
        });
    
    </script>
</head>
<body>
    <input id="btnAppend" type="button" value="AppendChild" />
    <input id="btnRemove" type="button" value="RemoveChild" />
    <input id="btnReplace" type="button" value="ReplaceChild" />
    <input id="btnInsertBefore" type="button" value="InsertBefore" />
    <div id="divRed" class="red">
    </div>
    <div id="divYellow" class="yellow">
    </div>
    <div id="divBlue" class="blue">
    </div>
</body>
</html>
